<script lang="ts" setup>
import OppoAi from '@/components/icon/oppo-ai.vue'
</script>

<template>
  <div>
    <div class="content_feature _pc-1312-content">
      <div
        class="flex justify-between items-baseline mb-[1.25rem] lg:mb-[clamp(1.25rem,-0.1818rem+2.2371vw,2.5rem)]"
      >
        <p class="text-lg lg:text-2xl">更多新品</p>
        <div class="flex self-center opacity-55 hover:opacity-80 cursor-pointer">
          <p class="text-base hidden lg:block">查看其他产品</p>
          <svg class="w-[1.25rem] lg:w-[1.5rem] aspect-square">
            <use href="#icon-com-arrow-right" />
          </svg>
        </div>
      </div>

      <div class="feature">
        <div class="_item item1">
          <picture class="w-full h-full block cursor-pointer">
            <source media="(max-width: 640px)" srcset="./image/656-900.jpg" />
            <img
              alt="OPPO Find N5"
              class="w-full h-full object-cover"
              loading="lazy"
              src="./image/2624-920.jpg"
            />
          </picture>

          <div class="absolute w-full h-full top-0 _padding grid content-between">
            <div>
              <oppo-ai class="w-[3.625rem] h-[0.75rem] lg:w-[5.875rem] lg:h-[1.25rem]" />
              <p class="text-2xl">OPPO Find N5</p>
            </div>

            <div
              class="h-[5.25rem] w-full sm:w-[clamp(13.75rem,3.125rem+26.5625vw,15.875rem)] p-[0.75rem] pb-[1rem] text-sm bg-[#efede9] grid content-between _rounded"
            >
              <h2>钛薄了 太强了</h2>
              <div class="flex gap-[1rem]">
                <p style="border-bottom: 1px solid">了解更多</p>
                <p style="border-bottom: 1px solid">立即购买</p>
              </div>
            </div>
          </div>
        </div>

        <div class="_item item-bottom _padding">
          <p class="text-2xl">OPPO K12s</p>

          <div class="__mid">
            <img
              alt="OPPO K12s"
              class="w-full h-full object-contain"
              loading="lazy"
              sizes="(max-width: 1280px) 480px, 640px"
              src="./image/480-480-white-v1.png"
              srcset="./image/480-480-white-v1.png 480w, ./image/640-640-white-v1.png 640w"
            />
          </div>

          <div
            class="h-[5.25rem] w-full 2xl:w-[clamp(13.75rem,3.125rem+26.5625vw,15.875rem)] p-[0.75rem] pb-[1rem] text-sm bg-[#efede9] grid content-between _rounded 2xl:self-end"
          >
            <h2>续航小霸王，五年都流畅</h2>
            <div class="flex gap-[1rem]">
              <p style="border-bottom: 1px solid">了解更多</p>
              <p style="border-bottom: 1px solid">立即购买</p>
            </div>
          </div>
        </div>

        <div class="_item item-bottom _padding">
          <p class="text-2xl">OPPO Watch X2 Mini</p>

          <div class="__mid">
            <img
              alt="OPPO Watch X2 Mini"
              class="w-full h-full object-contain"
              loading="lazy"
              sizes="(max-width: 1280px) 480px, 640px"
              src="./image/480-480-gold.png"
              srcset="./image/480-480-gold.png 480w, ./image/640-640-gold.png 640w"
            />
          </div>

          <div
            class="h-[5.25rem] w-full 2xl:w-[clamp(13.75rem,3.125rem+26.5625vw,15.875rem)] p-[0.75rem] pb-[1rem] text-sm bg-[#efede9] grid content-between _rounded 2xl:self-end"
          >
            <h2>闪耀鎏金</h2>
            <div class="flex gap-[1rem]">
              <p style="border-bottom: 1px solid">了解更多</p>
              <p style="border-bottom: 1px solid">立即购买</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.content_feature {
  .feature {
    @apply max-sm:space-y-2 sm:grid sm:[grid-template-areas:'A_A'_'B_C'] sm:grid-cols-2 sm:gap-1;

    ._padding {
      @apply px-[0.5rem] pt-[1.25rem] pb-[0.5rem];
    }

    .item1 {
      @apply h-[29.75rem] sm:h-[20.25rem] lg:h-[clamp(21.875rem,14.0179rem+12.2768vw,28.75rem)]
      sm:[grid-area:A] relative flow-root;
    }

    .item-bottom {
      @apply w-full bg-[#f6f6f6] h-[25.5rem] sm:h-[24.75rem] lg:h-[clamp(22.875rem,26.8929rem+-3.3482vw,24.75rem)];

      display: grid;
      grid-template-rows: auto 1fr auto;

      @media (width >= 1536px) {
        grid-template-rows: none;
        grid-template-areas: 'title img' 'desc img';
      }

      .__mid {
        min-height: 0;
        min-width: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: scale 0.32s cubic-bezier(0.48, 0.04, 0.52, 0.96);
        will-change: scale;
        cursor: pointer;

        @media (width >= 1536px) {
          grid-area: img;
        }

        &:hover {
          scale: 110%;
        }
      }
    }
  }
}
</style>
